<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人空间 - 哔哩哔哩风格</title>
  <link href="chrome-extension://bnjoienjhhclcabnkbhhfndecoipmcdg/background/keniu/layout/index.html?apptype=1&uid=15d4464121de4cef90df1d88a34037bc&source=2&siteUrl=file%3A%2F%2F%2FC%3A%2FUsers%2Flenovo%2FDesktop%2F%25E5%25A3%2581%25E7%25BA%25B8%2F%25E3%2580%2590%25E5%25AD%2598%25E6%25A1%25A3%25E3%2580%2591Aqours%2520%25E6%2581%258B%25E3%2581%25AB%25E3%2581%25AA%25E3%2582%258A%25E3%2581%259F%25E3%2581%2584AQUARIUM%25E7%25AF%2587%2520SR_10_DorothysLetter_%25E6%259D%25A5%25E8%2587%25AA%25E5%25B0%258F%25E7%25BA%25A2%25E4%25B9%25A6%25E7%25BD%2591%25E9%25A1%25B5%25E7%2589%2588.jpg&picpath=file%3A%2F%2F%2FC%3A%2FUsers%2Flenovo%2FDesktop%2F%E5%A3%81%E7%BA%B8%2F%E3%80%90%E5%AD%98%E6%A1%A3%E3%80%91Aqours+%E6%81%8B%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%9F%E3%81%84AQUARIUM%E7%AF%87+SR_10_DorothysLetter_%E6%9D%A5%E8%87%AA%E5%B0%8F%E7%BA%A2%E4%B9%A6%E7%BD%91%E9%A1%B5%E7%89%88.jpg
  " rel="stylesheet">
  <style>
    /* ==========================================
       基础样式重置
    ========================================== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      font-size: 16px;
    }

    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.5;
      color: #333;
      background-color: #f5f5f7;
    }

    ul, ol {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      display: block;
      max-width: 100%;
    }

    button, input, textarea, select {
      font-family: inherit;
      font-size: inherit;
      border: none;
      outline: none;
    }

    button {
      cursor: pointer;
    }

    /* ==========================================
       颜色与变量定义
    ========================================== */
    :root {
      --primary: #FB7299;    /* B站粉色 */
      --secondary: #23ADE5;  /* B站蓝色 */
      --dark: #18191C;
      --light: #F5F5F7;
      --gray: #999999;
      --gray-dark: #666666;
      --gray-light: #EEEEEE;
      --white: #FFFFFF;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
      --transition: all 0.3s ease;
    }

    /* ==========================================
       工具类
    ========================================== */
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    .flex {
      display: flex;
    }

    .flex-wrap {
      flex-wrap: wrap;
    }

    .flex-col {
      flex-direction: column;
    }

    .items-center {
      align-items: center;
    }

    .justify-between {
      justify-content: space-between;
    }

    .gap-4 {
      gap: 1rem;
    }

    .gap-6 {
      gap: 1.5rem;
    }

    .mt-4 {
      margin-top: 1rem;
    }

    .mt-6 {
      margin-top: 1.5rem;
    }

    .mb-4 {
      margin-bottom: 1rem;
    }

    .mb-6 {
      margin-bottom: 1.5rem;
    }

    .p-4 {
      padding: 1rem;
    }

    .p-5 {
      padding: 1.25rem;
    }

    .text-center {
      text-align: center;
    }

    .font-bold {
      font-weight: 700;
    }

    .font-medium {
      font-weight: 500;
    }

    .text-sm {
      font-size: 0.875rem;
    }

    .text-xs {
      font-size: 0.75rem;
    }

    .text-primary {
      color: var(--primary);
    }

    .text-secondary {
      color: var(--secondary);
    }

    .text-gray {
      color: var(--gray);
    }

    .text-gray-dark {
      color: var(--gray-dark);
    }

    .bg-white {
      background-color: var(--white);
    }

    .bg-gray-light {
      background-color: var(--gray-light);
    }

    .rounded-xl {
      border-radius: 0.75rem;
    }

    .rounded-full {
      border-radius: 9999px;
    }

    .shadow {
      box-shadow: var(--shadow);
    }

    .shadow-hover {
      box-shadow: var(--shadow-hover);
    }

    .overflow-hidden {
      overflow: hidden;
    }

    .object-cover {
      object-fit: cover;
    }

    .aspect-video {
      aspect-ratio: 16 / 9;
    }

    .aspect-square {
      aspect-ratio: 1 / 1;
    }

    .border {
      border: 1px solid var(--gray-light);
    }

    .border-t {
      border-top: 1px solid var(--gray-light);
    }

    .hidden {
      display: none !important;
    }

    /* ==========================================
       动画效果
    ========================================== */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
      animation: fadeIn 0.5s ease forwards;
    }

    @keyframes spinner {
      to { transform: rotate(360deg); }
    }

    .spinner {
      width: 1rem;
      height: 1rem;
      border: 2px solid var(--gray-light);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spinner 0.8s linear infinite;
      display: none;
    }

    /* ==========================================
       公共组件样式
    ========================================== */
    /* 按钮样式 */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      font-weight: 500;
      font-size: 0.875rem;
      transition: var(--transition);
    }

    .btn-primary {
      background-color: var(--primary);
      color: var(--white);
    }

    .btn-primary:hover {
      background-color: #f85a88;
    }

    .btn-secondary {
      background-color: var(--gray-light);
      color: var(--gray-dark);
    }

    .btn-secondary:hover {
      background-color: #e5e5e5;
    }

    /* 导航栏样式 */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      background-color: var(--white);
      z-index: 100;
      transition: var(--transition);
    }

    .navbar-scrolled {
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .navbar-container {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.25rem;
      font-weight: 700;
    }

    .logo i {
      color: var(--primary);
      font-size: 1.5rem;
    }

    .search-box {
      position: relative;
      flex: 1;
      max-width: 500px;
      margin: 0 1rem;
    }

    .search-box input {
      width: 100%;
      padding: 0.5rem 1rem 0.5rem 2.5rem;
      border-radius: 9999px;
      background-color: var(--gray-light);
      transition: var(--transition);
    }

    .search-box input:focus {
      box-shadow: 0 0 0 2px rgba(251, 114, 153, 0.3);
    }

    .search-btn {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      color: var(--gray);
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .nav-item {
      font-size: 1.25rem;
      color: var(--dark);
      transition: var(--transition);
    }

    .nav-item:hover {
      color: var(--primary);
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--primary);
    }

    .menu-toggle {
      display: none;
      background: none;
      font-size: 1.25rem;
    }

    /* 页脚样式 */
    .footer {
      background-color: var(--white);
      border-top: 1px solid var(--gray-light);
      padding: 2rem 0;
      margin-top: 2rem;
    }

    .footer-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .footer-logo i {
      color: var(--primary);
      font-size: 1.5rem;
    }

    .copyright {
      font-size: 0.875rem;
      color: var(--gray);
    }

    .social-links {
      display: flex;
      gap: 1rem;
    }

    .social-link {
      font-size: 1.25rem;
      color: var(--gray);
      transition: var(--transition);
    }

    .social-link:hover {
      color: var(--primary);
    }

    /* ==========================================
       主页样式
    ========================================== */
    main {
      padding-top: 56px; /* 导航栏高度 */
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
      animation: fadeIn 0.5s ease forwards;
    }

    .cover-section {
      position: relative;
      height: 300px;
      overflow: hidden;
    }

    .cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cover-mask {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(24, 25, 28, 0.8), transparent);
    }

    .user-info {
      position: relative;
      margin-top: -80px;
      padding-bottom: 20px;
    }

    .user-info-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .user-avatar {
      width: 160px;
      height: 160px;
      border-radius: 8px;
      object-fit: cover;
      border: 4px solid var(--white);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .user-detail {
      color: var(--white);
      padding-top: 20px;
    }

    .user-name {
      font-size: 1.75rem;
      font-weight: 700;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .user-desc {
      margin-top: 0.5rem;
      max-width: 600px;
      opacity: 0.9;
    }

    .user-actions {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }

    .follow-btn {
      background-color: var(--primary);
      color: var(--white);
    }

    .message-btn {
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(4px);
      color: var(--white);
    }

    .message-btn:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    .stats-nav {
      padding: 20px 0;
    }

    .stats {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-bottom: 1.5rem;
    }

    .stat-item {
      text-align: center;
    }

    .stat-num {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--dark);
    }

    .stat-name {
      font-size: 0.875rem;
      color: var(--gray);
    }

    .content-tabs {
      border-bottom: 1px solid var(--gray-light);
    }

    .tabs-list {
      display: flex;
      overflow-x: auto;
      padding-bottom: 8px;
      scrollbar-width: none;
    }

    .tabs-list::-webkit-scrollbar {
      display: none;
    }

    .tab-btn {
      padding: 8px 16px;
      margin-right: 8px;
      white-space: nowrap;
      background: none;
      font-size: 0.9rem;
      color: var(--gray-dark);
      border-bottom: 2px solid transparent;
      transition: var(--transition);
    }

    .tab-btn:hover {
      color: var(--primary);
    }

    .tab-btn.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
      font-weight: 500;
    }

    .content-area {
      padding: 20px 0 40px;
    }

    .main-content {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 1.5rem;
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .card {
      background-color: var(--white);
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 1.25rem;
    }

    .card-title {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .card-title i {
      color: var(--primary);
    }

    .profile-info {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .info-item {
      display: flex;
      align-items: flex-start;
    }

    .info-item i {
      color: var(--gray);
      margin-top: 4px;
      width: 1.25rem;
    }

    .info-item p {
      margin-left: 0.75rem;
      color: var(--dark);
    }

    .info-item .link {
      margin-left: 0.75rem;
      color: var(--secondary);
    }

    .info-item .link:hover {
      text-decoration: underline;
    }

    .interest-tags {
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid var(--gray-light);
    }

    .tags-title {
      font-weight: 500;
      margin-bottom: 0.75rem;
    }

    .tags-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .tag {
      display: inline-block;
      background-color: var(--gray-light);
      color: var(--gray-dark);
      font-size: 0.75rem;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
    }

    .announcement-content {
      font-size: 0.9rem;
      color: var(--gray-dark);
      line-height: 1.6;
    }

    .announcement-time {
      font-size: 0.8rem;
      color: var(--gray);
      margin-top: 0.75rem;
    }

    .filter-bar {
      margin-bottom: 1.5rem;
    }

    .filter-wrap {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .filter-btns {
      display: flex;
      gap: 0.5rem;
    }

    .filter-btn {
      padding: 4px 12px;
      border-radius: 9999px;
      background-color: var(--gray-light);
      color: var(--gray-dark);
      font-size: 0.875rem;
      transition: var(--transition);
    }

    .filter-btn.active {
      background-color: var(--primary);
      color: var(--white);
    }

    .filter-select {
      position: relative;
    }

    .custom-select {
      padding: 4px 12px 4px 12px;
      padding-right: 2.5rem;
      border-radius: 9999px;
      background-color: var(--gray-light);
      color: var(--gray-dark);
      font-size: 0.875rem;
      appearance: none;
    }

    .filter-select i {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray);
      pointer-events: none;
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .content-card {
      background-color: var(--white);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: var(--transition);
      cursor: pointer;
    }

    .content-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-hover);
    }

    .card-media {
      position: relative;
      overflow: hidden;
    }

    .media-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .video-card .card-media {
      aspect-ratio: 16/9;
    }

    .video-card:hover .media-img {
      transform: scale(1.05);
    }

    .video-duration {
      position: absolute;
      bottom: 0.5rem;
      right: 0.5rem;
      background-color: rgba(0, 0, 0, 0.7);
      color: var(--white);
      font-size: 0.75rem;
      padding: 2px 6px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    .video-card:hover .video-duration {
      background-color: rgba(251, 114, 153, 0.9);
    }

    .play-btn {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.2);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .video-card:hover .play-btn {
      opacity: 1;
    }

    .play-btn i {
      width: 3rem;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--primary);
      color: var(--white);
      border-radius: 50%;
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }

    .video-card:hover .play-btn i {
      transform: scale(1);
    }

    .card-info {
      padding: 0.75rem;
    }

    .card-title {
      font-size: 0.9rem;
      font-weight: 500;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 0.5rem;
      height: 2.5rem;
    }

    .card-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.8rem;
      color: var(--gray);
    }

    .article-card .card-info {
      padding: 1rem;
    }

    .article-type {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
      color: var(--gray-dark);
      font-size: 0.875rem;
    }

    .article-type i {
      color: var(--secondary);
      font-size: 1.25rem;
    }

    .article-card .card-title {
      -webkit-line-clamp: 3;
      height: auto;
      margin-bottom: 0.75rem;
    }

    .photo-card .card-media {
      aspect-ratio: 1/1;
    }

    .photo-type {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      background-color: rgba(0, 0, 0, 0.5);
      color: var(--white);
      font-size: 0.75rem;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .photoset-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 2px;
      aspect-ratio: 1/1;
    }

    .photoset-more {
      position: absolute;
      bottom: 2px;
      right: 2px;
      width: 50%;
      height: 50%;
      background-color: rgba(0, 0, 0, 0.5);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      font-weight: 500;
    }

    .load-more {
      margin-top: 2rem;
      text-align: center;
    }

    .load-btn {
      padding: 0.5rem 2rem;
      background: none;
      border: 1px solid var(--gray-light);
      color: var(--gray-dark);
      gap: 0.5rem;
    }

    .load-btn:hover {
      background-color: var(--gray-light);
    }

    /* ==========================================
       视频详情页样式
    ========================================== */
    .video-page .container {
      display: grid;
      grid-template-columns: 3fr 1fr;
      gap: 1.5rem;
      padding: 20px 15px;
    }

    .video-player {
      background-color: #000;
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 16/9;
      position: relative;
    }

    .player-container {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .video-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 80px;
      background-color: rgba(251, 114, 153, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .play-icon:hover {
      transform: translate(-50%, -50%) scale(1.1);
    }

    .video-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin: 1rem 0;
      line-height: 1.4;
    }

    .video-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
      border-bottom: 1px solid var(--gray-light);
      margin-bottom: 1rem;
    }

    .video-stats {
      display: flex;
      gap: 1.5rem;
      color: var(--gray);
      font-size: 0.9rem;
    }

    .stat-item {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .video-actions {
      display: flex;
      gap: 1rem;
    }

    .action-btn {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      padding: 0.5rem 1rem;
      background-color: var(--gray-light);
      color: var(--gray-dark);
      border-radius: 9999px;
      font-size: 0.9rem;
      transition: var(--transition);
    }

    .action-btn:hover {
      background-color: #e5e5e5;
    }

    .author-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      padding: 1rem;
    }

    .author-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }

    .author-detail {
      margin-left: 1rem;
      flex: 1;
    }

    .author-name {
      font-weight: 700;
      margin-bottom: 0.25rem;
    }

    .author-fans {
      font-size: 0.875rem;
      color: var(--gray);
    }

    .video-desc {
      margin-bottom: 1.5rem;
    }

    .desc-title {
      font-weight: 700;
      margin-bottom: 0.75rem;
      color: var(--dark);
    }

    .desc-content {
      color: var(--gray-dark);
      line-height: 1.6;
    }

    .desc-content p {
      margin-bottom: 0.75rem;
    }

    .desc-content ul {
      margin-left: 1.5rem;
      list-style: disc;
      margin-bottom: 0.75rem;
    }

    .comment-section {
      margin-bottom: 2rem;
    }

    .comment-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .comment-input {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .comment-input .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .comment-input textarea {
      flex: 1;
      padding: 0.75rem;
      border: 1px solid var(--gray-light);
      border-radius: 8px;
      resize: none;
      height: 100px;
    }

    .send-comment {
      align-self: flex-end;
    }

    .comments-list {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .comment-item {
      display: flex;
      gap: 1rem;
    }

    .comment-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .comment-content {
      flex: 1;
    }

    .comment-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    .comment-user {
      font-weight: 500;
    }

    .comment-time {
      font-size: 0.8rem;
      color: var(--gray);
    }

    .comment-text {
      color: var(--dark);
      margin-bottom: 0.5rem;
    }

    .comment-actions {
      display: flex;
      gap: 1rem;
    }

    .comment-actions .action-btn {
      padding: 0.25rem 0.75rem;
      font-size: 0.875rem;
    }

    .load-more-comments {
      width: 100%;
      padding: 0.75rem;
      background: none;
      border: 1px solid var(--gray-light);
      color: var(--gray-dark);
    }

    .sidebar-title {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--gray-light);
    }

    .related-videos {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .related-video {
      display: flex;
      gap: 0.75rem;
      cursor: pointer;
    }

    .video-img {
      width: 120px;
      height: 80px;
      border-radius: 4px;
      object-fit: cover;
    }

    .video-info {
      flex: 1;
    }

    .video-info .video-title {
      font-size: 0.9rem;
      margin: 0 0 0.25rem 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
    }

    .video-meta {
      font-size: 0.8rem;
      color: var(--gray);
      padding: 0;
      border: none;
      margin: 0;
    }

    /* ==========================================
       文章详情页样式
    ========================================== */
    .article-page .container {
      display: grid;
      grid-template-columns: 3fr 1fr;
      gap: 1.5rem;
      padding: 20px 15px;
    }

    .article-header {
      margin-bottom: 2rem;
    }

    .article-title {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.4;
    }

    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      color: var(--gray);
      font-size: 0.9rem;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--gray-light);
    }

    .article-content {
      background-color: var(--white);
      border-radius: 8px;
      padding: 2rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow);
    }

    .article-content p {
      margin-bottom: 1.5rem;
      line-height: 1.8;
    }

    .article-content img {
      margin: 1.5rem auto;
      max-width: 100%;
      border-radius: 4px;
    }

    .article-content h2 {
      font-size: 1.5rem;
      margin: 2rem 0 1rem;
      color: var(--dark);
    }

    .article-content h3 {
      font-size: 1.25rem;
      margin: 1.5rem 0 0.75rem;
      color: var(--dark);
    }

    .article-content ul {
      margin: 0 0 1.5rem 1.5rem;
      list-style: disc;
    }

    .article-content li {
      margin-bottom: 0.5rem;
    }

    .article-actions {
      display: flex;
      justify-content: center;
      gap: 2rem;
      margin: 2rem 0;
    }

    .article-actions .action-btn {
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
    }

    /* ==========================================
       图片详情页样式
    ========================================== */
    .photo-page .container {
      padding: 20px 15px;
    }

    .photo-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .photo-item {
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: var(--transition);
    }

    .photo-item:hover {
      transform: scale(1.03);
    }

    .photo-item img {
      width: 100%;
      aspect-ratio: 1/1;
      object-fit: cover;
    }

    .photo-detail {
      background-color: var(--white);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow);
    }

    .photo-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .photo-desc {
      color: var(--gray-dark);
      margin-bottom: 1rem;
    }

    .photo-meta {
      color: var(--gray);
      font-size: 0.9rem;
    }

    /* 图片查看器 */
    .lightbox {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.9);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      display: none;
    }

    .lightbox.active {
      display: flex;
    }

    .lightbox-img {
      max-width: 90%;
      max-height: 90vh;
      object-fit: contain;
    }

    .lightbox-prev, .lightbox-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background-color: rgba(255, 255, 255, 0.2);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      cursor: pointer;
      transition: var(--transition);
    }

    .lightbox-prev:hover, .lightbox-next:hover {
      background-color: rgba(251, 114, 153, 0.8);
    }

    .lightbox-prev {
      left: 1rem;
    }

    .lightbox-next {
      right: 1rem;
    }

    /* ==========================================
       响应式调整
    ========================================== */
    @media (max-width: 1024px) {
      .main-content,
      .video-page .container,
      .article-page .container {
        grid-template-columns: 1fr;
      }
      
      .sidebar {
        order: 1;
      }
      
      .content-main {
        order: 0;
      }
    }

    @media (max-width: 768px) {
      .cover-section {
        height: 200px;
      }
      
      .user-avatar {
        width: 120px;
        height: 120px;
      }
      
      .user-name {
        font-size: 1.5rem;
      }
      
      .content-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      }
      
      .video-title,
      .article-title {
        font-size: 1.25rem;
      }
      
      .video-meta,
      .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
      }
      
      .menu-toggle {
        display: block;
      }
      
      .search-box, .nav-item:not(.avatar-wrap) {
        display: none;
      }
      
      .photo-gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      }
    }
  </style>
</head>

<body>
  <!-- 顶部导航栏 -->
  <header id="navbar" class="navbar">
    <div class="container navbar-container">
      <div class="logo">
        <i class="fa fa-play-circle"></i>
        <span>哔哩哔哩</span>
      </div>
      
      <div class="search-box">
        <input type="text" placeholder="搜索内容、用户...">
        <button class="search-btn"><i class="fa fa-search"></i></button>
      </div>
      
      <nav class="nav-menu">
        <a href="#" class="nav-item" data-page="home-page">
          <i class="fa fa-home"></i>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-compass"></i>
        </a>
        <a href="#" class="nav-item">
          <i class="fa fa-bell"></i>
        </a>
        <a href="#" class="avatar-wrap">
          <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="avatar">
        </a>
        <button class="menu-toggle">
          <i class="fa fa-bars"></i>
        </button>
      </nav>
    </div>
  </header>

  <!-- 主内容区 - 主页 -->
  <main id="home-page" class="page active">
    <!-- 封面区域 -->
    <section class="cover-section">
      <img src="https://picsum.photos/id/1068/1920/400" alt="个人封面" class="cover-img">
      <div class="cover-mask"></div>
      
      <!-- 用户信息卡片 -->
      <div class="user-info">
        <div class="container">
          <div class="user-info-wrap">
            <!-- 头像 -->
            <img src="https://picsum.photos/id/237/200/200" alt="用户头像" class="user-avatar">
            
            <!-- 用户信息 -->
            <div class="user-details">
              <h1 class="user-name">linluo</h1>
              <p class="user-bio">分享日常、精彩瞬间和个人感悟，与同好一起交流</p>
              
              <div class="user-actions">
                <button class="btn btn-primary follow-btn">
                  <i class="fa fa-plus mr-1"></i> 关注
                </button>
                <button class="btn btn-secondary message-btn">
                  <i class="fa fa-envelope mr-1"></i> 私信
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 数据统计和导航 -->
    <section class="container">
      <div class="stats">
        <div class="stat-item">
          <p class="stat-value">246</p>
          <p class="stat-name">粉丝</p>
        </div>
        <div class="stat-item">
          <p class="stat-value">38</p>
          <p class="stat-name">关注</p>
        </div>
        <div class="stat-item">
          <p class="stat-value">124</p>
          <p class="stat-name">投稿</p>
        </div>
        <div class="stat-item">
          <p class="stat-value">15.8万</p>
          <p class="stat-name">总播放</p>
        </div>
      </div>
      
      <!-- 内容导航 -->
      <div class="content-tabs">
        <ul class="tabs-list scrollbar-hide">
          <li>
            <button class="tab-btn active" data-type="all">全部内容</button>
          </li>
          <li>
            <button class="tab-btn" data-type="video">视频</button>
          </li>
          <li>
            <button class="tab-btn" data-type="article">专栏/日志</button>
          </li>
          <li>
            <button class="tab-btn" data-type="photo">图片</button>
          </li>
          <li>
            <button class="tab-btn" data-type="favorite">收藏</button>
          </li>
          <li>
            <button class="tab-btn" data-type="dynamic">动态</button>
          </li>
        </ul>
      </div>
    </section>
    
    <!-- 内容展示区 -->
    <section class="container">
      <div class="main-content">
        <!-- 左侧边栏 -->
        <div class="sidebar">
          <!-- 个人资料卡片 -->
          <div class="profile-card card">
            <h3 class="profile-title">个人资料</h3>
            
            <div class="profile-info">
              <div class="info-item">
                <i class="fa fa-user info-icon"></i>
                <p class="info-text">内容创作者，摄影爱好者</p>
              </div>
              <div class="info-item">
                <i class="fa fa-calendar info-icon"></i>
                <p class="info-text">加入时间: 2021-05-18</p>
              </div>
              <div class="info-item">
                <i class="fa fa-map-marker info-icon"></i>
                <p class="info-text">现居地: 上海</p>
              </div>
              <div class="info-item">
                <i class="fa fa-link info-icon"></i>
                <a href="#" class="info-text text-secondary hover:underline">https://example.com</a>
              </div>
            </div>
            
            <div class="profile-tags">
              <h4 class="tags-title">兴趣标签</h4>
              <div class="tags-list">
                <span class="tag-item">旅行</span>
                <span class="tag-item">摄影</span>
                <span class="tag-item">美食</span>
                <span class="tag-item">电影</span>
                <span class="tag-item">音乐</span>
              </div>
            </div>
          </div>
          
          <!-- 公告卡片 -->
          <div class="announcement-card card">
            <h3 class="announcement-title flex items-center">
              <i class="fa fa-bullhorn text-primary mr-2"></i> 公告
            </h3>
            <p class="announcement-content">
              每周更新原创内容，欢迎大家留言讨论。最近在整理旅行照片，敬请期待新的相册！
            </p>
            <p class="announcement-date">更新于: 2023-06-15</p>
          </div>
        </div>
        
        <!-- 右侧主内容 -->
        <div class="content-area">
          <!-- 内容筛选 -->
          <div class="filter-bar card">
            <div class="filter-options">
              <div class="filter-buttons">
                <button class="filter-btn active" data-filter="latest">最新发布</button>
                <button class="filter-btn" data-filter="popular">最多播放</button>
                <button class="filter-btn" data-filter="commented">最多评论</button>
              </div>
              
              <div class="filter-select">
                <select class="custom-select">
                  <option>全部类型</option>
                  <option>视频</option>
                  <option>日志</option>
                  <option>图片</option>
                </select>
                <i class="fa fa-chevron-down select-arrow"></i>
              </div>
            </div>
          </div>
          
          <!-- 内容展示网格 -->
          <div class="content-grid">
            <!-- 视频卡片1 -->
            <div class="card video-card content-card" data-type="video" data-id="1">
              <div class="card-media">
                <img src="https://picsum.photos/id/1033/600/400" alt="视频封面" class="card-image media-img">
                <div class="video-duration">08:45</div>
                <div class="play-overlay play-btn">
                  <i class="fa fa-play play-icon"></i>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">城市风光延时摄影，记录城市的日与夜</h3>
                <div class="card-meta">
                  <span>1.2万次观看</span>
                  <span>3天前</span>
                </div>
              </div>
            </div>
            
            <!-- 视频卡片2 -->
            <div class="card video-card content-card" data-type="video" data-id="2">
              <div class="card-media">
                <img src="https://picsum.photos/id/1035/600/400" alt="视频封面" class="card-image media-img">
                <div class="video-duration">12:30</div>
                <div class="play-overlay play-btn">
                  <i class="fa fa-play play-icon"></i>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">美食制作教程：如何做出完美的意大利面</h3>
                <div class="card-meta">
                  <span>3.5万次观看</span>
                  <span>1周前</span>
                </div>
              </div>
            </div>
            
            <!-- 日志卡片 -->
            <div class="card article-card content-card" data-type="article" data-id="1">
              <div class="card-content">
                <div class="article-header">
                  <i class="fa fa-file-text-o article-icon"></i>
                  <span class="article-type">专栏/日志</span>
                </div>
                <h3 class="article-title">我的日本旅行见闻：东京与京都的文化差异体验</h3>
                <div class="card-meta">
                  <span>2.8千次阅读</span>
                  <span>2周前</span>
                </div>
              </div>
            </div>
            
            <!-- 图片卡片 -->
            <div class="card photo-card content-card" data-type="photo" data-id="1">
              <div class="card-media">
                <img src="https://picsum.photos/id/1024/600/600" alt="图片内容" class="card-image media-img">
                <span class="photo-type">
                  <i class="fa fa-picture-o"></i> 摄影
                </span>
              </div>
              <div class="card-content">
                <h3 class="card-title">海边日落风景摄影集</h3>
                <div class="card-meta">
                  <span>5.2千次浏览</span>
                  <span>3周前</span>
                </div>
              </div>
            </div>
            
            <!-- 图片集卡片 -->
            <div class="card photoset-card content-card" data-type="photo" data-id="2">
              <div class="card-media photoset-grid">
                <img src="https://picsum.photos/id/1015/300/300" alt="图片内容" class="photoset-item media-img">
                <img src="https://picsum.photos/id/1016/300/300" alt="图片内容" class="photoset-item media-img">
                <img src="https://picsum.photos/id/1018/300/300" alt="图片内容" class="photoset-item media-img">
                <div class="photoset-more">+5</div>
              </div>
              <div class="card-content">
                <h3 class="card-title">山区徒步旅行照片合集</h3>
                <div class="card-meta">
                  <span>3.6千次浏览</span>
                  <span>1个月前</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 加载更多 -->
          <div class="load-more">
            <button id="load-more-btn" class="btn load-more-btn">
              <span>加载更多</span>
              <div class="spinner"></div>
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="container footer-container">
        <div class="footer-logo">
          <i class="fa fa-play-circle"></i>
          <span>哔哩哔哩风格个人空间</span>
        </div>
        <p class="footer-copyright">© 2023 个人空间. 保留所有权利.</p>
        <div class="social-links">
          <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
          <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
          <a href="#" class="social-link"><i class="fa fa-github"></i></a>
        </div>
      </div>
    </footer>
  </main>

  <!-- 主内容区 - 视频详情页 -->
  <main id="video-detail-page" class="page video-page">
    <div class="container">
      <div class="video-content">
        <!-- 视频播放器 -->
        <div class="video-player">
          <div class="player-container">
            <img src="https://picsum.photos/id/1033/600/400" alt="视频封面" class="video-cover">
            <button class="play-icon"><i class="fa fa-play"></i></button>
          </div>
        </div>
        
        <!-- 视频信息 -->
        <div class="video-info">
          <h1 class="video-title">城市风光延时摄影，记录城市的日与夜</h1>
          
          <div class="video-meta">
            <div class="video-stats">
              <span class="stat-item"><i class="fa fa-eye"></i> 1.2万次观看</span>
              <span class="stat-item"><i class="fa fa-comment"></i> 328条评论</span>
              <span class="stat-item"><i class="fa fa-calendar"></i> 2023-06-10</span>
            </div>
            
            <div class="video-actions">
              <button class="action-btn like-btn"><i class="fa fa-thumbs-up"></i> 点赞(520)</button>
              <button class="action-btn collect-btn"><i class="fa fa-star"></i> 收藏</button>
              <button class="action-btn share-btn"><i class="fa fa-share"></i> 分享</button>
            </div>
          </div>
        </div>
        
        <!-- 作者信息 -->
        <div class="author-info card">
          <img src="https://picsum.photos/id/237/200/200" alt="作者头像" class="author-avatar">
          <div class="author-detail">
            <h3 class="author-name">linluo</h3>
            <p class="author-fans">246粉丝</p>
          </div>
          <button class="btn follow-btn">关注</button>
        </div>
        
        <!-- 视频简介 -->
        <div class="video-desc card">
          <h3 class="desc-title">视频简介</h3>
          <div class="desc-content">
            <p>本视频记录了城市从日出到日落的美丽景色，通过延时摄影展现城市的活力与魅力。拍摄地点包括市中心高楼、江边步道和城市公园。</p>
            <p>使用设备：</p>
            <ul>
              <li>1. 相机：Sony A7M3</li>
              <li>2. 镜头：Sony 16-35mm F4</li>
              <li>3. 三脚架：曼富图 Befree</li>
              <li>4. 云台：曼富图 MH490-BH</li>
            </ul>
          </div>
        </div>
        
        <!-- 评论区 -->
        <div class="comment-section">
          <h3 class="comment-title">评论 (328)</h3>
          
          <div class="comment-input">
            <img src="https://picsum.photos/id/64/40/40" alt="你的头像" class="user-avatar">
            <textarea placeholder="写下你的评论..."></textarea>
            <button class="btn send-comment">发送</button>
          </div>
          
          <div class="comments-list">
            <!-- 评论项 -->
            <div class="comment-item">
              <img src="https://picsum.photos/id/91/40/40" alt="用户头像" class="comment-avatar">
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-user">摄影爱好者</span>
                  <span class="comment-time">3天前</span>
                </div>
                <p class="comment-text">画面太震撼了，特别是日落那段，色彩处理得非常好！请问用的是什么后期软件？</p>
                <div class="comment-actions">
                  <button class="action-btn"><i class="fa fa-thumbs-up"></i> 24</button>
                  <button class="action-btn"><i class="fa fa-reply"></i> 回复</button>
                </div>
              </div>
            </div>
            
            <!-- 评论项 -->
            <div class="comment-item">
              <img src="https://picsum.photos/id/92/40/40" alt="用户头像" class="comment-avatar">
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-user">城市探索者</span>
                  <span class="comment-time">2天前</span>
                </div>
                <p class="comment-text">这是哪个城市啊？看起来好熟悉，是上海吗？</p>
                <div class="comment-actions">
                  <button class="action-btn"><i class="fa fa-thumbs-up"></i> 12</button>
                  <button class="action-btn"><i class="fa fa-reply"></i> 回复</button>
                </div>
              </div>
            </div>
          </div>
          
          <button class="btn load-more-comments">加载更多评论</button>
        </div>
      </div>
      
      <!-- 侧边栏：推荐视频 -->
      <aside class="video-sidebar">
        <h3 class="sidebar-title">相关推荐</h3>
        <div class="related-videos">
          <!-- 推荐视频项 -->
          <div class="related-video" data-type="video" data-id="2">
            <img src="https://picsum.photos/id/1035/600/400" alt="视频封面" class="video-img">
            <div class="video-info">
              <h4 class="video-title">美食制作教程：如何做出完美的意大利面</h4>
              <p class="video-meta">3.5万次观看 · 1周前</p>
            </div>
          </div>
          
          <!-- 推荐视频项 -->
          <div class="related-video" data-type="video" data-id="3">
            <img src="https://picsum.photos/id/1036/600/400" alt="视频封面" class="video-img">
            <div class="video-info">
              <h4 class="video-title">山间云雾延时摄影，感受大自然的魅力</h4>
              <p class="video-meta">2.1万次观看 · 2周前</p>
            </div>
          </div>
        </div>
      </aside>
    </div>
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="container footer-container">
        <div class="footer-logo">
          <i class="fa fa-play-circle"></i>
          <span>哔哩哔哩风格个人空间</span>
        </div>
        <p class="footer-copyright">© 2023 个人空间. 保留所有权利.</p>
        <div class="social-links">
          <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
          <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
          <a href="#" class="social-link"><i class="fa fa-github"></i></a>
        </div>
      </div>
    </footer>
  </main>

  <!-- 主内容区 - 文章详情页 -->
  <main id="article-detail-page" class="page article-page">
    <div class="container">
      <div class="article-content-area">
        <div class="article-header">
          <h1 class="article-title">我的日本旅行见闻：东京与京都的文化差异体验</h1>
          
          <div class="article-meta">
            <span><i class="fa fa-user"></i> linluo</span>
            <span><i class="fa fa-calendar"></i> 2023-05-20</span>
            <span><i class="fa fa-eye"></i> 2.8千次阅读</span>
            <span><i class="fa fa-comment"></i> 86条评论</span>
          </div>
        </div>
        
        <div class="article-content card">
          <p>去年秋天，我终于实现了去日本旅行的愿望。这次旅行我选择了东京和京都两个城市，想亲身体验一下日本的现代与传统。这两个城市给我的感受截然不同，却又都让我深深着迷。</p>
          
          <h2>东京：现代都市的快节奏与便利</h2>
          
          <p>东京给我的第一印象就是现代化和高效率。从成田机场乘坐京成电铁进入市区，沿途的高楼大厦和整齐有序的街道让我感受到了这座城市的活力。</p>
          
          <img src="https://picsum.photos/id/1031/800/400" alt="东京街景">
          
          <p>在东京，我最喜欢的地方是涩谷十字路口。站在星巴克的二楼，看着成千上万的人在同一个绿灯亮起时穿过马路，那种视觉冲击力难以用语言形容。这让我感受到了东京作为国际大都市的繁忙与活力。</p>
          
          <h3>东京的美食体验</h3>
          
          <p>东京的美食给了我很多惊喜。从筑地市场的新鲜寿司，到街边的拉面店，每一样都让我回味无穷。特别值得一提的是，我在新宿尝试了一家米其林三星餐厅，虽然价格不菲，但那种味觉体验绝对值得。</p>
          
          <h2>京都：传统与历史的沉淀</h2>
          
          <p>从东京乘坐新干线到京都只需要两个半小时，但当我走出京都站，却感觉仿佛进入了另一个世界。这里没有东京的高楼大厦，取而代之的是传统的木制建筑和寺庙。</p>
          
          <img src="https://picsum.photos/id/1037/800/400" alt="京都寺庙">
          
          <p>在京都，我参观了金阁寺、清水寺等著名寺庙。漫步在岚山的竹林小径，听着风吹过竹叶的声音，那种宁静与祥和是在东京感受不到的。</p>
          
          <h3>京都的传统工艺</h3>
          
          <p>京都的传统工艺让我印象深刻。我在祇园的一家小店亲手体验了和服的穿着，还参观了京友禅的制作过程。这些传统工艺虽然历经千年，却依然保持着生命力。</p>
          
          <h2>东京与京都的文化差异</h2>
          
          <p>总结这次旅行，我觉得东京和京都代表了日本文化的两个方面：</p>
          
          <ul>
            <li>东京代表了现代、创新和国际化</li>
            <li>京都代表了传统、历史和本土化</li>
            <li>东京的节奏快，人们行色匆匆</li>
            <li>京都的节奏慢，人们更注重生活品质</li>
            <li>东京的建筑风格多元，充满未来感</li>
            <li>京都的建筑风格统一，保持传统特色</li>
          </ul>
          
          <p>这次旅行让我对日本文化有了更深入的了解。如果你也计划去日本旅行，我强烈建议你同时参观东京和京都，亲身体验这两座城市的独特魅力。</p>
        </div>
        
        <div class="article-actions">
          <button class="action-btn like-btn"><i class="fa fa-thumbs-up"></i> 点赞(326)</button>
          <button class="action-btn collect-btn"><i class="fa fa-star"></i> 收藏</button>
          <button class="action-btn share-btn"><i class="fa fa-share"></i> 分享</button>
        </div>
        
        <!-- 评论区 -->
        <div class="comment-section">
          <h3 class="comment-title">评论 (86)</h3>
          
          <div class="comment-input">
            <img src="https://picsum.photos/id/64/40/40" alt="你的头像" class="user-avatar">
            <textarea placeholder="写下你的评论..."></textarea>
            <button class="btn send-comment">发送</button>
          </div>
          
          <div class="comments-list">
            <!-- 评论项 -->
            <div class="comment-item">
              <img src="https://picsum.photos/id/93/40/40" alt="用户头像" class="comment-avatar">
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-user">旅行爱好者</span>
                  <span class="comment-time">2周前</span>
                </div>
                <p class="comment-text">我去年也去了这两个城市，感受和你完全一样！京都的秋天真的太美了。</p>
                <div class="comment-actions">
                  <button class="action-btn"><i class="fa fa-thumbs-up"></i> 42</button>
                  <button class="action-btn"><i class="fa fa-reply"></i> 回复</button>
                </div>
              </div>
            </div>
          </div>
          
          <button class="btn load-more-comments">加载更多评论</button>
        </div>
      </div>
      
      <!-- 侧边栏 -->
      <aside class="article-sidebar">
        <div class="author-info card">
          <img src="https://picsum.photos/id/237/200/200" alt="作者头像" class="author-avatar">
          <div class="author-detail">
            <h3 class="author-name">linluo</h3>
            <p class="author-fans">246粉丝</p>
          </div>
          <button class="btn follow-btn">关注</button>
        </div>
        
        <h3 class="sidebar-title">相关推荐</h3>
        <div class="related-articles">
          <div class="card related-article content-card" data-type="article" data-id="2">
            <div class="card-content">
              <h3 class="card-title">巴黎咖啡馆文化：品味法式生活的艺术</h3>
              <div class="card-meta">
                <span>1.5千次阅读</span>
                <span>3周前</span>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="container footer-container">
        <div class="footer-logo">
          <i class="fa fa-play-circle"></i>
          <span>哔哩哔哩风格个人空间</span>
        </div>
        <p class="footer-copyright">© 2023 个人空间. 保留所有权利.</p>
        <div class="social-links">
          <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
          <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
          <a href="#" class="social-link"><i class="fa fa-github"></i></a>
        </div>
      </div>
    </footer>
  </main>

  <!-- 主内容区 - 图片详情页 -->
  <main id="photo-detail-page" class="page photo-page">
    <div class="container">
      <div class="photo-detail card">
        <h1 class="photo-title">海边日落风景摄影集</h1>
        <p class="photo-desc">这组照片拍摄于海南三亚的海边，记录了从黄昏到日落的美丽瞬间。不同时间的光线变化让海面呈现出完全不同的色彩，从金色到橙红，再到最后的深蓝，每一刻都让人惊叹大自然的美丽。</p>
        <p class="photo-meta"><i class="fa fa-calendar"></i> 发布于 2023-05-05 <span class="ml-4"><i class="fa fa-eye"></i> 5.2千次浏览</span></p>
      </div>
      
      <div class="photo-gallery">
        <div class="photo-item" data-src="https://picsum.photos/id/1024/800/800">
          <img src="https://picsum.photos/id/1024/400/400" alt="海边日落">
        </div>
        <div class="photo-item" data-src="https://picsum.photos/id/1025/800/800">
          <img src="https://picsum.photos/id/1025/400/400" alt="海边日落">
        </div>
        <div class="photo-item" data-src="https://picsum.photos/id/1026/800/800">
          <img src="https://picsum.photos/id/1026/400/400" alt="海边日落">
        </div>
        <div class="photo-item" data-src="https://picsum.photos/id/1027/800/800">
          <img src="https://picsum.photos/id/1027/400/400" alt="海边日落">
        </div>
      </div>
      
      <div class="photo-actions" style="display: flex; justify-content: center; gap: 2rem; margin: 2rem 0;">
        <button class="action-btn like-btn"><i class="fa fa-thumbs-up"></i> 点赞(256)</button>
        <button class="action-btn collect-btn"><i class="fa fa-star"></i> 收藏</button>
        <button class="action-btn share-btn"><i class="fa fa-share"></i> 分享</button>
      </div>
      
      <!-- 评论区 -->
      <div class="comment-section card">
        <h3 class="comment-title">评论 (42)</h3>
        
        <div class="comment-input">
          <img src="https://picsum.photos/id/64/40/40" alt="你的头像" class="user-avatar">
          <textarea placeholder="写下你的评论..."></textarea>
          <button class="btn send-comment">发送</button>
        </div>
        
        <div class="comments-list">
          <!-- 评论项 -->
          <div class="comment-item">
            <img src="https://picsum.photos/id/94/40/40" alt="用户头像" class="comment-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-user">摄影发烧友</span>
                <span class="comment-time">3周前</span>
              </div>
              <p class="comment-text">色彩处理得太棒了！请问用的是什么相机和镜头？</p>
              <div class="comment-actions">
                <button class="action-btn"><i class="fa fa-thumbs-up"></i> 36</button>
                <button class="action-btn"><i class="fa fa-reply"></i> 回复</button>
              </div>
            </div>
          </div>
        </div>
        
        <button class="btn load-more-comments">加载更多评论</button>
      </div>
    </div>
    
    <!-- 图片查看器 -->
    <div id="lightbox" class="lightbox">
      <button class="lightbox-prev"><i class="fa fa-chevron-left"></i></button>
      <img id="lightbox-img" src="" alt="大图预览" class="lightbox-img">
      <button class="lightbox-next"><i class="fa fa-chevron-right"></i></button>
    </div>
    
    <!-- 页脚 -->
    <footer class="footer">
      <div class="container footer-container">
        <div class="footer-logo">
          <i class="fa fa-play-circle"></i>
          <span>哔哩哔哩风格个人空间</span>
        </div>
        <p class="footer-copyright">© 2023 个人空间. 保留所有权利.</p>
        <div class="social-links">
          <a href="#" class="social-link"><i class="fa fa-weibo"></i></a>
          <a href="#" class="social-link"><i class="fa fa-wechat"></i></a>
          <a href="#" class="social-link"><i class="fa fa-github"></i></a>
        </div>
      </div>
    </footer>
  </main>

  <script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化公共功能
      initCommonFeatures();
      
      // 初始化主页功能
      initHomePage();
      
      // 初始化视频页功能
      initVideoPage();
      
      // 初始化文章页功能
      initArticlePage();
      
      // 初始化图片页功能
      initPhotoPage();
    });

    // 公共功能初始化
    function initCommonFeatures() {
      // 导航栏滚动效果
      const navbar = document.getElementById('navbar');
      if (navbar) {
        window.addEventListener('scroll', function() {
          if (window.scrollY > 50) {
            navbar.classList.add('navbar-scrolled');
          } else {
            navbar.classList.remove('navbar-scrolled');
          }
        });
      }
      
      // 页面切换功能
      const navItems = document.querySelectorAll('.nav-item[data-page]');
      navItems.forEach(item => {
        item.addEventListener('click', function(e) {
          e.preventDefault();
          const pageId = this.getAttribute('data-page');
          switchPage(pageId);
        });
      });
    }
    
    // 切换页面
    function switchPage(pageId) {
      // 隐藏所有页面
      document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示目标页面
      const targetPage = document.getElementById(pageId);
      if (targetPage) {
        targetPage.classList.add('active');
        window.scrollTo(0, 0);
      }
    }

    // 主页功能初始化
    function initHomePage() {
      // 内容标签切换
      const tabBtns = document.querySelectorAll('.tab-btn');
      const contentCards = document.querySelectorAll('.content-card');
      
      tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          // 移除所有标签的活跃状态
          tabBtns.forEach(b => b.classList.remove('active'));
          // 添加当前标签的活跃状态
          this.classList.add('active');
          
          const type = this.dataset.type;
          
          // 筛选内容
          contentCards.forEach(card => {
            if (type === 'all' || card.dataset.type === type) {
              card.style.display = 'block';
              setTimeout(() => {
                card.style.opacity = '1';
                card.style.transform = 'translateY(0)';
              }, 50);
            } else {
              card.style.opacity = '0';
              card.style.transform = 'translateY(10px)';
              setTimeout(() => {
                card.style.display = 'none';
              }, 300);
            }
          });
        });
      });
      
      // 筛选按钮切换
      const filterBtns = document.querySelectorAll('.filter-btn');
      filterBtns.forEach(btn => {
        btn.addEventListener('click', function() {
          filterBtns.forEach(b => b.classList.remove('active'));
          this.classList.add('active');
          simulateLoading();
        });
      });
      
      // 加载更多功能
      const loadMoreBtn = document.getElementById('load-more-btn');
      if (loadMoreBtn) {
        const spinner = loadMoreBtn.querySelector('.spinner');
        const contentGrid = document.querySelector('.content-grid');
        
        loadMoreBtn.addEventListener('click', function() {
          // 显示加载动画
          spinner.style.display = 'block';
          loadMoreBtn.disabled = true;
          
          // 模拟加载延迟
          setTimeout(() => {
            // 隐藏加载动画
            spinner.style.display = 'none';
            loadMoreBtn.disabled = false;
            
            // 克隆现有卡片作为新内容
            const cards = document.querySelectorAll('.content-card');
            if (cards.length > 0) {
              const randomIndex = Math.floor(Math.random() * cards.length);
              const clone = cards[randomIndex].cloneNode(true);
              
              // 添加点击事件
              attachCardClickEvent(clone);
              
              // 重置克隆卡片的样式
              clone.style.opacity = '0';
              clone.style.transform = 'translateY(20px)';
              clone.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
              
              // 添加到网格
              contentGrid.appendChild(clone);
              
              // 触发动画
              setTimeout(() => {
                clone.style.opacity = '1';
                clone.style.transform = 'translateY(0)';
              }, 50);
            }
            
          }, 1500);
        });
      }
      
      // 为内容卡片添加点击事件
      document.querySelectorAll('.content-card').forEach(card => {
        attachCardClickEvent(card);
      });
    }
    
    // 为卡片添加点击事件
    function attachCardClickEvent(card) {
      card.addEventListener('click', function() {
        const type = this.dataset.type;
        switch(type) {
          case 'video':
            switchPage('video-detail-page');
            break;
          case 'article':
            switchPage('article-detail-page');
            break;
          case 'photo':
            switchPage('photo-detail-page');
            break;
        }
      });
    }

    // 视频页功能初始化
    function initVideoPage() {
      // 播放按钮点击事件
      const playIcon = document.querySelector('.video-page .play-icon');
      if (playIcon) {
        playIcon.addEventListener('click', function() {
          const playerContainer = document.querySelector('.video-page .player-container');
          if (playerContainer) {
            // 模拟视频播放
            this.style.display = 'none';
            const videoCover = document.querySelector('.video-page .video-cover');
            if (videoCover) videoCover.style.opacity = '0.5';
            
            alert('视频开始播放');
          }
        });
      }
      
      // 视频操作按钮交互
      const actionBtns = document.querySelectorAll('.video-page .action-btn');
      actionBtns.forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.stopPropagation();
          this.classList.toggle('active');
          if (this.classList.contains('active')) {
            this.style.backgroundColor = 'var(--primary)';
            this.style.color = 'white';
          } else {
            this.style.backgroundColor = 'var(--gray-light)';
            this.style.color = 'var(--gray-dark)';
          }
        });
      });
      
      // 关注按钮交互
      const followBtn = document.querySelector('.video-page .author-info .follow-btn');
      if (followBtn) {
        followBtn.addEventListener('click', function(e) {
          e.stopPropagation();
          this.classList.toggle('followed');
          if (this.classList.contains('followed')) {
            this.innerHTML = '<i class="fa fa-check"></i> 已关注';
            this.style.backgroundColor = 'var(--gray-light)';
            this.style.color = 'var(--gray-dark)';
          } else {
            this.innerHTML = '<i class="fa fa-plus"></i> 关注';
            this.style.backgroundColor = 'var(--primary)';
            this.style.color = 'white';
          }
        });
      }
      
      // 相关视频点击事件
      document.querySelectorAll('.related-video').forEach(video => {
        video.addEventListener('click', function() {
          // 在实际应用中，这里会加载新的视频内容
          alert('加载新视频内容');
        });
      });
      
      // 评论提交
      const sendComment = document.querySelector('.video-page .send-comment');
      if (sendComment) {
        sendComment.addEventListener('click', function() {
          const commentInput = document.querySelector('.video-page .comment-input textarea');
          if (commentInput && commentInput.value.trim()) {
            alert('评论已提交: ' + commentInput.value.trim());
            commentInput.value = '';
          } else {
            alert('请输入评论内容');
          }
        });
      }
    }

    // 文章页功能初始化
    function initArticlePage() {
      // 文章点赞功能
      const likeBtn = document.querySelector('.article-page .like-btn');
      if (likeBtn) {
        likeBtn.addEventListener('click', function() {
          this.classList.toggle('active');
          if (this.classList.contains('active')) {
            this.style.backgroundColor = 'var(--primary)';
            this.style.color = 'white';
          } else {
            this.style.backgroundColor = 'var(--gray-light)';
            this.style.color = 'var(--gray-dark)';
          }
        });
      }
      
      // 文章收藏功能
      const collectBtn = document.querySelector('.article-page .collect-btn');
      if (collectBtn) {
        collectBtn.addEventListener('click', function() {
          this.classList.toggle('active');
          if (this.classList.contains('active')) {
            this.style.backgroundColor = 'var(--primary)';
            this.style.color = 'white';
          } else {
            this.style.backgroundColor = 'var(--gray-light)';
            this.style.color = 'var(--gray-dark)';
          }
        });
      }
    }

    // 图片页功能初始化
    function initPhotoPage() {
      // 图片查看器功能
      const photos = document.querySelectorAll('.photo-item');
      const lightbox = document.getElementById('lightbox');
      const lightboxImg = document.getElementById('lightbox-img');
      let currentIndex = 0;
      
      if (lightbox && lightboxImg) {
        // 打开图片查看器
        photos.forEach((photo, index) => {
          photo.addEventListener('click', function() {
            const imgSrc = this.getAttribute('data-src');
            if (imgSrc) {
              lightboxImg.src = imgSrc;
              lightbox.classList.add('active');
              document.body.style.overflow = 'hidden';
              currentIndex = index;
            }
          });
        });
        
        // 关闭图片查看器
        lightbox.addEventListener('click', function(e) {
          if (e.target === lightbox) {
            lightbox.classList.remove('active');
            document.body.style.overflow = 'auto';
          }
        });
        
        // 图片查看器导航
        const prevBtn = document.querySelector('.lightbox-prev');
        const nextBtn = document.querySelector('.lightbox-next');
        
        if (prevBtn && nextBtn) {
          prevBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            currentIndex = (currentIndex - 1 + photos.length) % photos.length;
            lightboxImg.src = photos[currentIndex].getAttribute('data-src');
          });
          
          nextBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            currentIndex = (currentIndex + 1) % photos.length;
            lightboxImg.src = photos[currentIndex].getAttribute('data-src');
          });
        }
      }
    }

    // 工具函数：模拟加载状态
    function simulateLoading() {
      const contentArea = document.querySelector('.content-grid');
      if (contentArea) {
        // 添加加载状态
        contentArea.style.opacity = '0.5';
        
        // 1秒后恢复
        setTimeout(() => {
          contentArea.style.opacity = '1';
        }, 800);
      }
    }
  </script>
</body>
</html>